<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <!-- 树状 -->
        <div class="app-container">
          <el-tree :data="formData" :props="defaultProps" @node-click="handleNodeClick" />
        </div>
      </el-aside>
      <el-container>
        <!-- 机构信息 -->
        <el-header style="height:390px">
          <div class="h-header">
            <h4>机构信息</h4>
          </div>
          <div class="h-container">
            <el-form ref="form" :model="form" label-width="80px" class="el-form">
              <!-- 第一行 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item label="机构编号">
                    <el-input v-model="form.num" class="" />
                  </el-form-item>
                </el-col>
                <el-col :span="8"><el-form-item label="机构名称">
                  <el-input v-model="form.name" />
                </el-form-item></el-col>
                <el-col :span="8">

                  <el-form-item label="机构类型">
                    <el-select v-model="form.region">
                      <el-option label="一级转运中心" value="one" />
                      <el-option label="二级转运中心" value="two" />
                    </el-select>
                  </el-form-item>

                </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item label="机构地址">
                    <el-input v-model="form.province" class="" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="form.city" class="" />
                </el-col>
                <el-col :span="8">
                  <el-input v-model="form.contry" class="" />
                </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item label="详细地址">
                    <el-input v-model="form.num" class="" />
                  </el-form-item>
                </el-col>
                <el-col :span="8"><el-form-item label="经度">
                  <el-input v-model="form.name" />
                </el-form-item>
                </el-col>
                <el-col :span="8"><el-form-item label="纬度">
                  <el-input v-model="form.name" />
                </el-form-item>
                </el-col>
              </el-row>
              <!-- 第四行 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item label="项负责人">
                    <el-input v-model="form.num" />
                  </el-form-item>
                </el-col>
                <el-col :span="8"><el-form-item label="机构电话">
                  <el-input v-model="form.name" class="el-input-inner" />
                </el-form-item>
                </el-col>
              </el-row>
              <!-- 编辑按钮 -->
              <el-form-item>
                <el-button class="edit">编辑</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-header>
        <el-main style="height:410px">Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script >
import { tree } from '@/api/organization'
// import { arr2tree } from '@/utils'
export default {
  name: 'Organization',
  data() {
    return {
      form: {
        name: '',
        province: '',
        city: '',
        contry: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      // 树状结构
      formData: [{
        name: '东北转运中心',
        children: [{
          name: '二级 1-1',
          children: [{
            name: '三级 1-1-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    async getTree() {
      const res = await tree()
      // console.log(JSON.parse(res.data.data))
      this.formData = JSON.parse(res.data.data)
    },
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
 ::v-deep .el-input-inner{
    background-color: #f5f7fa !important;
    }
.el-container{
  // 转运中心
  .app-container{
    margin-top: 0px;
    line-height: 240px;
  }
.el-container{
    //机构信息
    .el-header {
    padding: 0px;
    margin: 0px 20px 0px;
    background-color: #ffffff;
    color: black;
    .h-header{
      height: 55px;
      background-color: #fafafa;
      padding: 18px 20px;
     h4{
       margin: 0px;
     }
    }
    //表单

    .h-container{
     padding: 20px;
     padding-top: 30px;
     padding-right: 36px;
     color: #000;
     text-align: center;

    .edit{
      background-color: #e15536;
      color:white;
      width: 89px;
      height: 36px;
    }

    }
  }
    .el-main {
    margin: 20px;
    background-color: #ffffff;
    color: #333;
    text-align: center;

  }
}
.el-aside {
  margin: 0px 0px 20px 20px;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 800px;
}
}
</style>
